<template>
  <div class="bgc-default">
    <div class="top-nav">
      <template v-for="(item, key) of topNavBar">
        <div :key="key" class="nav-item" v-if="item.showFlag" :class="{'nav-active' : selectedNavKey === key}" @click="goTarget(key)">{{item.name}}</div>
      </template>
    </div>

    <div class="bg-color-white pad-20 mar-20">
      <!-- 进销存设置 -->
      <div class="scroll-item" id="warehouse-set" v-if="topNavBar['warehouse-set'].showFlag">
        <div class="scroll-title-row">
          <div class="scroll-title">进销存设置</div>
        </div>
        <div class="config-item">
          <h5>税额设置</h5>
          <div>
            <div class="v-align-c">
              <label class="config-label mar-r-15">默认进项税税目</label>
              <el-select v-model="supplierConfig.taxItemsId">
                <el-option value="0" label="无"></el-option>
                <el-option v-for="item in taxList" :key="item.taxItemsId" :value="item.taxItemsId" :label="item.taxName + '(' + item.taxRate + '%)'"></el-option>
              </el-select>
            </div>
          </div>
          <h5>分仓规则</h5>
          <div>
            <div class="v-align-c">
              <label class="config-label mar-r-15" style="width: 160px;">&nbsp;</label>
              <el-checkbox v-model="warehouseDeliverChecked">启用仓库发货（启用仓库后发货后，商品库存将切换为仓库数量，并将订单分至仓库发货）</el-checkbox>
            </div>
            <div class="mar-t-40">
              <div class="v-align-c">
                <label class="config-label mar-r-15" style="width: 160px;">&nbsp;</label>
                <el-checkbox v-model="ignoreAreaChecked">分仓时忽略就近原则（多个仓库可满足整单原则时，直接按仓库顺序号确定发货仓库）</el-checkbox>
              </div>
            </div>
          </div>
          <h5>出入库规则</h5>
          <div class="v-align-c">
            <label class="config-label mar-r-15" style="width: 160px;">&nbsp;</label>
            <el-checkbox  v-model="warehouseAuditChecked">关闭出入库审核流程（关闭后，出入库单提交后无需经过审核，直接变成已完成状态）</el-checkbox>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-bar">
      <el-button type="primary" @click="saveSupplierConfig" :disabled="disabledSave">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { getBySupplierId, saveSupplierConfig } from '@/api/user/supplier-config'
  import { getTaxList } from '@/api/warehouse/warehouseTaxItems'

  export default {
    data() {
      return {
        supplierConfig: {
          taxItemsId: '',
          warehouseDeliverFlag: 0,
          closeWarehouseAudit: 1,
          warehouseAuthority: 1
        },
        defaultConfig: {
          enterpriseId: this.getEnterpriseId(),
          supplierId: this.getSupplierId()
        },
        disabledSave: false,
        predefineColors: [],
        active: '1F',
        scroll: 0,
        topNavBar: {
          'warehouse-set': { name: '进销存设置', target: 'warehouse-set', showFlag: true }
        },
        selectedNavKey: 'warehouse-set',
        // 启用仓库发货
        warehouseDeliverChecked: false,
        // 是否忽略就近原则
        ignoreAreaChecked: false,
        // 出入库审核
        warehouseAuditChecked: true,
        // 税目列表
        taxList: []
      }
    },
    // 初始化页面
    created() {
      this.initDataInfo()
      // 获取税目信息
      this.getTaxList()
      // 获取初始化的颜色值 全局设置
      this.predefineColors = this.$store.state.globalData.predefineColors
    },
    mounted() {
      const queryParams = this.getCurrentPage().query
      if (queryParams.active) {
        this.goTarget(queryParams.active)
      }
      const that = this
      window.addEventListener('mousewheel', function() {
        const scroll = document.documentElement.scrollTop || document.body.scrollTop
        for (var key in that.topNavBar) {
          if (that.topNavBar[key].showFlag) {
            if (that.topNavBar[key]['top'] - scroll < 185) {
              that.selectedNavKey = key
            }
          }
        }
      })
    },
    methods: {
      // 目标区域滚动
      goTarget(id) {
        document.querySelector('#' + id).scrollIntoView({
          behavior: 'smooth',
          block: 'center'
        })
        this.selectedNavKey = id
      },
      initDataInfo() {
        getBySupplierId(this.getSupplierId()).then(response => {
          if (response.isError) return
          this.supplierConfig = !response.data ? { ... this.defaultConfig } : response.data
          this.warehouseDeliverChecked = this.supplierConfig.warehouseDeliverFlag === 1
          this.ignoreAreaChecked = this.supplierConfig.ignoreAreaFlag === 1
          this.warehouseAuditChecked = this.supplierConfig.closeWarehouseAudit === 1
          if (this.supplierConfig.warehouseAuthority === 0) {
            this.topNavBar['warehouse-set'].showFlag = false
          }
          this.$nextTick(function() {
            for (const key in this.topNavBar) {
              if (this.topNavBar[key].showFlag) {
                const dom = document.getElementById(key)
                this.$set(this.topNavBar[key], 'top', dom.offsetTop)
              }
            }
          })
        })
      },
      saveSupplierConfig() {
        this.disabledSave = true
        this.supplierConfig.enterpriseId = this.getEnterpriseId()
        // 进销存设置保存时赋值
        this.supplierConfig.warehouseDeliverFlag = this.warehouseDeliverChecked ? 1 : 0
        this.supplierConfig.closeWarehouseAudit = this.warehouseAuditChecked ? 1 : 0
        this.supplierConfig.ignoreAreaFlag = this.ignoreAreaChecked ? 1 : 0
        saveSupplierConfig(this.supplierConfig).then(response => {
          this.disabledSave = false
          if (response.isError) return
          this.$message({ message: '成功', type: 'success' })
        })
      },
      // 获取用户的税目列表
      getTaxList() {
        getTaxList(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.taxList = response.data
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.bgc-default{
  padding-bottom: 70px;
}
.top-nav{
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 999;
  box-shadow: 0 2px 6px #eee;
  .nav-item{
    cursor: pointer;
  }
  .nav-active{
    position: relative;
    color: #409eff;
    &::after{
      content: '';
      position: absolute;
      bottom: -20px;
      left: -15px;
      width: calc(100% + 30px);
      height: 2px;
      background-color: #409eff;
    }
  }
}
.scroll-item{
  .scroll-title-row{
    background-color: #f7f8fa;
    padding-left: 20px;
    .scroll-title{
      height: 50px;
      line-height: 50px;
      padding-left: 10px;
      position: relative;
      &::before{
        content: '';
        position: absolute;
        left: 0;
        top: 25px;
        width: 3px;
        height: 15px;
        background-color: #006aff;
        transform: translateY(-50%);
      }
    }
  }
  .config-item{
    margin-bottom: 40px;
    .mar-t-40{
      margin-top: 40px;
    }
    h5{
      width: 150px;
      text-align: right;
      font-size: 14px;
      margin: 26px 0 6px;
    }
    .config-label{
      font-size: 14px;
      font-weight: unset;
      width: 275px;
      text-align: right;
    }
    .config-label-2{
      font-size: 14px;
      font-weight: unset;
      width: 100px;
      text-align: right;
    }
    .config-tip{
      margin-left: 290px;
    }
    .config-tip-2 {
      margin-left: 405px;
    }
    /deep/ .el-upload--picture-card{
      width: 150px;
      height: 50px;
      box-sizing: unset;
      line-height: 60px;
      img{
        border-radius: 6px;
      }
    }
  }
}
.bottom-bar{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  z-index: 999;
  box-shadow: 0 -2px 8px #eeeeee;
  .el-button{
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0;
  }
}
</style>
